<template>
  <view class="pb-[80px]">
    <!-- Header -->
    <view class="text-center pt-10">
      <text class="text-xl font-semibold text-gray-800">订单支付</text>
    </view>

    <!-- 支付详情卡片 -->
    <view class="mx-4 mt-6 bg-white rounded-xl shadow p-6">
      <view class="flex justify-between items-center mb-4">
        <text class="text-gray-600">应付金额</text>
        <text class="text-3xl text-green-600 font-bold">¥{{ price }}</text>
      </view>
      <view class="flex justify-between items-center">
        <text class="text-gray-600">剩余支付时间</text>
        <text class="text-red-500 text-lg font-medium">{{ minutes }}:{{ seconds }}</text>
      </view>
    </view>

    <!-- 支付方式（可扩展） -->
    <view class="mx-4 mt-4 bg-white rounded-xl shadow p-4">
      <text class="text-gray-700">请选择支付方式</text>
      <view class="mt-2 flex items-center space-x-2">
        <view class="w-5 h-5 bg-green-500 rounded-full"></view>
        <text>微信支付</text>
      </view>
    </view>

    <!-- Fixed bottom button -->
    <view class="fixed bottom-0 left-0 right-0 bg-white p-4 shadow-inner">
      <button
        class="w-full bg-blue-600 text-white py-4 rounded-lg text-lg font-semibold"
        @click="pay"
      >
        立即支付
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const price = ref<string>('0.00')
const timeLeft = ref<number>(15 * 60) // 15分钟倒计时
const timer = ref<number | null>(null)

onLoad((options: Record<string, any>) => {
  if (options?.price) {
    price.value = options.price
  }
})

const minutes = computed(() => String(Math.floor(timeLeft.value / 60)).padStart(2, '0'))
const seconds = computed(() => String(timeLeft.value % 60).padStart(2, '0'))

onMounted(() => {
  timer.value = setInterval(() => {
    if (timeLeft.value > 0) {
      timeLeft.value--
    } else {
      clearInterval(timer.value!)
      uni.redirectTo({ url: '/pages/pay-fail/pay-fail' })
    }
  }, 1000)
})

function pay() {
  clearInterval(timer.value!)
  const success = Math.random() > 0.3
  if (success) {
    uni.redirectTo({ url: '/pages/pay-success/pay-success' })
  } else {
    uni.redirectTo({ url: '/pages/pay-fail/pay-fail' })
  }
}
</script>

<style scoped>
/* 防止支付按钮被底部刘海遮挡 */
.fixed {
  z-index: 999;
}
</style>
